<template>
    <div class="main">
        <!-- 主页面 -->
        <div>
            <van-nav-bar title="创建教程" right-text="存草稿" left-arrow @click-left="onClickLeft"
                @click-right="onClickRight" />
            <!-- 封面 -->
            <div class="upload_img" islink @click="file_click()">
                <img src="" id="img1" style="width: 100vw; ">
                <span v-if="active == 0" style="position: absolute;">+添加一张教程封面</span>
                <input type="file" hidden ref="file" @click="dian_file()" id="file1">
            </div>
            <div class="upload_main">
                <!-- @click="show_span()" -->
                <div class="title_jianjie">
                    <div style="padding: 4%;border-bottom: 1px solid rgb(243, 243, 243);">
                        <input type="text" placeholder="添加标题" maxlength="40" v-model="main_title"
                            style=" border: 0;width: 100%; height:100%;font-size: 18px;">
                    </div>
                    <div class="jian_jie">
                        <div style="font-size: 13px;"><span>课程简介</span></div>
                        <div class="wen_jian">
                            <textarea placeholder="课程简介" maxlength="200" v-model="my_kejian"
                                style="width: 100%; resize: none; border: 0;line-height: 16px;"
                                @input="handleInput($event)" cols="3" rows="3"></textarea>
                        </div>
                    </div>
                </div>
                <div class="cailiao">
                    <div class="cailiao_fu" ref="fu">
                        <div style="font-size: 13px;"><span>需要什么材料?</span></div>
                        <div class="cailiao_fang">
                            <div class="cailiao_da">
                                <div class="cailiao_1" ref="zi">
                                    <textarea class="cailiao_onen" placeholder="材料名称" maxlength="15" v-model="cailiao1"
                                        @input="handleInput($event)" cols="3" rows="3" style="width: 70%;
                                    resize: none; 
                                    border: 0;
                                    line-height: 16px;"></textarea>
                                    <div
                                        style="border-left: 1px solid rgb(165, 165, 165); width: 30%;height: 20px; display: flex; justify-content: center; align-items: center;">
                                        <span style="margin-left: 10px;">
                                            <textarea style=" width: 65px; height: 21px; border: 0; resize: none;"
                                                placeholder="用量" maxlength="5"
                                                oninput="value=value.replace(/[^\d]/g,'')" cols="3" rows="3"
                                                v-model="cailiao_liang1" class="cailiao_oney"></textarea>
                                        </span>
                                        <p>
                                            <van-icon name="cross" />
                                        </p>
                                    </div>
                                </div>
                            </div>
                        </div>


                    </div>
                    <div style="margin-top: 5%;" @click="add_cailiao()">
                        <!-- @click="add_cailiao()" -->
                        <span style="color: red;">再增加一个</span>
                    </div>
                </div>
                <div class="gongju">
                    <div class="gongju_fu" ref="fu">
                        <div style="font-size: 13px;"><span>需要什么工具?</span></div>
                        <div class="gongju_fang">
                            <div class="gongju_da">
                                <div class="gongju_1" ref="zi">
                                    <textarea class="gongju_onen" placeholder="工具名称" maxlength="15" v-model="cailiao1"
                                        style="width: 70%;
                                    resize: none; 
                                    border: 0;
                                    line-height: 16px;" @input="handleInput($event)" cols="3" rows="3"></textarea>
                                    <div
                                        style="border-left: 1px solid rgb(165, 165, 165); width: 30%;height: 20px; display: flex; justify-content: center; align-items: center;">
                                        <span style="margin-left: 10px;">
                                            <textarea style=" width: 65px; height: 21px; border: 0; resize: none;"
                                                placeholder="用量" maxlength="5"
                                                oninput="value=value.replace(/[^\d]/g,'')" cols="3" rows="3"
                                                v-model="cailiao_liang1" class="gongju_oney"></textarea>
                                        </span>
                                        <p>
                                            <van-icon name="cross" />
                                        </p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div style="margin-top: 5%;" @click="add_gongju()">
                        <span style="color: red;">再增加一个</span>
                    </div>

                </div>
                <div class="fangfa">
                    <div class="fangfa_fu" ref="fu">
                        <div style="font-size: 13px;"><span>制作方法</span></div>
                        <div class="fangfa_fang">
                            <div class="fangfa_da">
                                <div style="margin-top: 10px; display: flex; justify-content: space-between; ">
                                    <span class="fangfa_buzhou">步骤1</span>
                                    <p>
                                        <van-icon name="cross" />
                                    </p>
                                </div>
                                <div class="fangfa_img" islink @click="fangfa_file_click()">
                                    <img src="" id="fangfa_img1" style="width: 100vw; ">
                                    <span v-if="fangfa_active == 0" style="position: absolute;">+添加一张教程封面</span>
                                    <input type="file" hidden ref="fangfa_file" @click="fangfa_dian_file()"
                                        id="fangfa_file1">
                                </div>
                                <div style="margin-top: 10px;border-bottom:1px solid rgb(243, 243, 243);">
                                    <textarea placeholder="添加步骤介绍" maxlength="200" v-model="my_kejian"
                                        style="width: 100%; resize: none; border: 0;line-height: 16px;"
                                        @input="handleInput($event)" cols="3" rows="3"></textarea>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div style="margin-top: 5%;" @click="add_fangfa()">
                        <span style="color: red;">再增加一个</span>
                    </div>
                </div>

            </div>



        </div>

        <div class="main_bottom">
            <van-cell is-link title="教程分类" :value="sel_fenlei" @click="show_fenlei = true" />
            <van-action-sheet v-model:show="show_fenlei" :actions="actions" @select="onSelect" />
            <div style="width: 90vw;padding: 4%;">

                <van-button round type="danger" size="large" @click="fabu()">确认发布</van-button>
            </div>



            <!-- <van-cell is-link title="基础用法" @click="show_jiaofen = true" />
            <van-action-sheet v-model:show="show_jiaofen" :actions="actions_jiaofen"  value="内容"
            @select="onSelect_jiaofen" /> -->
        </div>

        <!-- 模态框内容 -->
        <van-popup v-model:show="show" position="top" :style="{ width:'100vw',height: '100vh' }">
            <div style="background-color: rgb(243, 243, 243);">
                <van-nav-bar title="创建教程" right-text="下一步" left-arrow @click-left="onClickLeft1"
                    @click-right="onClickRight1" />
                <div class="my_title">
                    <div style="padding: 4%;">
                        <input type="text" placeholder="填写教程标题" maxlength="40" v-model="main_title"
                            style=" border: 0;width: 100%; height:100%;font-size: 18px;">
                    </div>
                    <div
                        style=" border: 1px solid rgb(243, 243, 243); font-size: 14px;padding: 3%; color: rgb(165, 165, 165);line-height: 20px;">
                        <span>
                            ·好的标题是吸引手工客关注的第一步。
                        </span> <br>
                        <span>
                            ·原创教程需写明教程作品名，不得与教程无关。例如：【原创】猫头鹰贴士制作、【转载】旧物改造
                        </span>
                    </div>
                </div>
                <div class="my_fenlei">
                    <div class="fenlei">
                        <van-cell is-link title="教程分类" :value="sel_fenlei" @click="show_fenlei = true" />
                        <van-action-sheet v-model:show="show_fenlei" :actions="actions" @select="onSelect" />
                    </div>
                </div>
            </div>
        </van-popup>
    </div>
</template>
<script setup lang="ts">
import { onMounted, reactive, ref, watch } from 'vue';
import { Toast } from 'vant'
import 'vant/es/toast/style';
//上标签点击事件
const onClickLeft = () => history.back();
const onClickRight = () => {
    console.log(99999);
}
const show = ref(false);

let fu: any = ref(null)
let zi: any = ref(null)
let main_title = ref("")//标题
let sel_fenlei = ref("选择")
let imgFile: any = ""
let active: any = ref(0)//材料
let fangfa_active: any = ref(0)//方法
let my_kejian = ref("")//课程简介
let cailiao1 = ref("")//材料1
let cailiao_liang1 = ref("")//材料用量1
let fangfa_img_list: any = ""
//分类
let show_fenlei = ref(false);
const actions = ref([
    { name: "布艺" },
    { name: "皮艺" },
    { name: "木艺" },
    { name: "发饰" },
    { name: "刺绣" },
])
//分类按钮点击出现模态框
const onSelect = (item: any) => {
    show_fenlei.value = false;
    console.log(item.name);
    sel_fenlei.value = item.name
};
//模态框"下一步"点击事件
const onClickRight1 = () => {
    if (main_title.value == "") {
        Toast('请填写教程标题')
    } else if (sel_fenlei.value == "选择") {
        Toast('请选择分类');
    } else {
        console.log('标题是', main_title.value);
        console.log('分类是', sel_fenlei.value);
        show.value = false;
    }

}
const onClickLeft1 = () => {
    history.back();
}


//动态添加dom元素后 监听不起作用
//监听输入的标题字数
watch(() => main_title.value, (newVal, oldVal) => {
    if (newVal.length >= 40) {
        Toast('最多可输入40个字符')
    }
})
//监听输入的课程简介文字数量
watch(() => my_kejian.value, (newVal, oldVal) => {
    if (newVal.length >= 200) {
        Toast('最多可输入200个字符')
    }
})
//监听材料的文字
watch(() => cailiao1.value, (newVal, oldVal) => {
    if (newVal.length >= 15) {
        Toast('最多可输入15个字符')
    }
})
//监听材料用量
watch(() => cailiao_liang1.value, (newVal, oldVal) => {
    if (newVal.length >= 5) {
        Toast('最多可输入5个字符')
    }
})

let file: any = ref(null)//定义文件信息
let fangfa_file: any = ref(null)

function dian_file() {
    // console.log(file.value.files.length);
    active.value = file.value.files.length
    console.log(active.value);
}
function file_click() {
    file.value.click()
}
//方法上传图片
function fangfa_file_click() {
    fangfa_file.value.click()
}
function fangfa_dian_file() {
    // console.log(file.value.files.length);
    fangfa_active.value = file.value.files.length
    console.log(fangfa_active.value);
}

let cailiao_arr: any = reactive([])//材料
let new_cailiao_arr: any = reactive([])//新的材料数组
let gongju_arr: any = reactive([])//工具
let fangfa_arr: any = reactive([])//方法
onMounted(() => {
    //封面
    let img1: any = document.getElementById('img1')
    let file1: any = document.getElementById('file1')
    file1.onchange = function () {
        imgFile = this.files[0]
        img1.src = URL.createObjectURL(imgFile)
        img1.onload = function () {
            URL.revokeObjectURL(this.src)
            active.value++
        }
    }

    //步骤图片  预览
    let fangfa_img1: any = document.getElementById('fangfa_img1')
    let fangfa_file1: any = document.getElementById('fangfa_file1')
    fangfa_file1.onchange = function () {
        fangfa_img_list = this.files[0]
        fangfa_img1.src = URL.createObjectURL(fangfa_img_list)
        fangfa_img1.onload = function () {
            URL.revokeObjectURL(this.src)
            fangfa_active.value++
        }
    }


    //动态添加材料
    let cailiao_fang = document.getElementsByClassName('cailiao_fang')[0]
    let one_cailiao = document.getElementsByClassName('cailiao_fang')[0].innerHTML
    cailiao_arr.push({
        neirong: one_cailiao,
        id: 0
    })
    let cailiao_str = ''
    for (var i = 0; i < cailiao_arr.length; i++) {
        cailiao_str = cailiao_str + cailiao_arr[i].neirong
    }
    cailiao_fang.innerHTML = cailiao_str
    let all_cailiao = cailiao_fang.querySelectorAll("p")
    for (let i = 0; i < all_cailiao.length; i++) {
        all_cailiao[i].onclick = function (e) {
            e.stopPropagation()
            console.log(i)
        }
    }

    //动态添加工具
    let gongju_fang = document.getElementsByClassName('gongju_fang')[0]
    let one_gongju = document.getElementsByClassName('gongju_fang')[0].innerHTML

    gongju_arr.push(one_gongju)
    let gongju_str = ''
    for (var i = 0; i < gongju_arr.length; i++) {
        gongju_str = gongju_str + gongju_arr[i]
    }
    gongju_fang.innerHTML = gongju_str
    let all_gongju = gongju_fang.querySelectorAll("p")
    for (let i = 0; i < all_gongju.length; i++) {
        all_gongju[i].onclick = function (e) {
            e.stopPropagation()
            console.log(i)
        }
    }

    //动态添加步骤
    let fangfa_fang = document.getElementsByClassName('fangfa_fang')[0]
    let one_fangfa = document.getElementsByClassName('fangfa_fang')[0].innerHTML
    fangfa_arr.push(one_fangfa)
    let fangfa_str = ''
    for (var i = 0; i < fangfa_arr.length; i++) {
        fangfa_str = fangfa_str + fangfa_arr[i]
    }

    fangfa_fang.innerHTML = fangfa_str
    let fangfa_buzhou = document.getElementsByClassName('fangfa_buzhou')
    for (let i = 0; i < fangfa_buzhou.length; i++) {
        fangfa_buzhou[i].innerHTML = `步骤` + (i + 1)
    }
    let all_fangfa = fangfa_fang.querySelectorAll("p")
    for (let i = 0; i < all_fangfa.length; i++) {
        all_fangfa[i].onclick = function (e) {
            e.stopPropagation()
            console.log(i)
        }
    }

})

//文字域自适应高度
function handleInput(e: any) {
    e.target.style.height = 'auto';
    e.target.style.height = e.target.scrollHeight + 'px';
}
//增加材料  动态创建元素
// function shan_cailiao() {
//     console.log(11111);
// }

// function shan_gongju() {
//     console.log(222);
// }

// function add_cailiao() {
//     // console.log(2222);
//     let fu = document.getElementsByClassName('cailiao_fu')[0]
//     let add_onecai = document.createElement('div')//创建div
//     add_onecai.innerHTML = document.getElementsByClassName('cailiao_da')[0].innerHTML
//     fu.appendChild(add_onecai)
//     var all_span = add_onecai.querySelectorAll("span")
//     all_span[all_span.length - 1].onclick = function () {
//         console.log("9999")
//     }

// }
//添加材料
function add_cailiao() {
    let cailiao_fang = document.getElementsByClassName('cailiao_fang')[0]
    let one_cailiao: any = document.getElementsByClassName('cailiao_da')[0].innerHTML
    cailiao_arr.push(
        {
            neirong: one_cailiao,
            id: Date.now()
        }
    )
    var one_Obj = document.createElement("div");
    one_Obj.innerHTML = one_cailiao
    cailiao_fang.appendChild(one_Obj);
    let all_cailiao = cailiao_fang.querySelectorAll("p")
    console.log(cailiao_arr);

    for (let i = 0; i < all_cailiao.length; i++) {
        // var i = arr.length-1;i >= 0;i--
        all_cailiao[i].onclick = function (e) {
            console.log(cailiao_arr)
            e.stopPropagation()
            console.log(i)
            for (let j = 1; j < cailiao_arr.length; j++) {
                if (cailiao_arr[i].id == cailiao_arr[j].id) {
                    cailiao_arr.splice(j, 1)
                    let m: any = document.getElementsByClassName("cailiao_1")[j];
                    m.parentNode.removeChild(m);
                }
            }

            // console.log(777777777777777777);

            // console.log(cailiao_arr)

            //         // for (let j = 0; j < all_cailiao.length; j++) {
            //         //     if (all_cailiao[j] != shan_one_cailiao) {
            //         //         new_cailiao_arr.push(all_cailiao[j])
            //         //     }
            //         // }
            //         let m: any = document.getElementsByClassName("cailiao_1")[i];
            //         m.parentNode.removeChild(m);
            //         // i--
            //         // all_cailiao = cailiao_fang.querySelectorAll("p")
            //         //         let cailiao_str = ''
            //         //         for (let i = 0; i < cailiao_arr.length; i++) {
            //         //             cailiao_str = cailiao_str + cailiao_arr[i]
            //         //         }
            //         //         console.log(cailiao_arr);
            //         // cailiao_fang.innerHTML = cailiao_str
            //         //         // let all_cailiao = cailiao_fang.querySelectorAll("p")
            //         //         // for (let i = 0; i < all_cailiao.length; i++) {
            //         //         //     all_cailiao[i].onclick = function (e) {
            //         //         //         e.stopPropagation()
            //         //         //         console.log(i)
            //         //         //         cailiao_arr.splice(i, 1)
            //         //         //         let cailiao_str = ''
            //         //         //         for (let i = 0; i < cailiao_arr.length; i++) {
            //         //         //             cailiao_str = cailiao_str + cailiao_arr[i]
            //         //         //         }
            //         //         //         cailiao_fang.innerHTML = cailiao_str
            //         //         //     }
            //         //         // }
        }
    }


}
// 添加工具
function add_gongju() {
    console.log(111111);
    let gongju_fang = document.getElementsByClassName('gongju_fang')[0]
    let one_gongju = document.getElementsByClassName('gongju_da')[0].innerHTML
    gongju_arr.push(one_gongju)
    let gongju_str = ''
    for (let i = 0; i < gongju_arr.length; i++) {
        gongju_str = gongju_str + gongju_arr[i]
    }
    gongju_fang.innerHTML = gongju_str
    let all_gongju = gongju_fang.querySelectorAll("p")
    for (let i = 0; i < all_gongju.length; i++) {
        all_gongju[i].onclick = function (e) {
            e.stopPropagation()
            console.log(i)
            gongju_arr.splice(i, 1)
            let gongju_str = ''
            for (let i = 0; i < gongju_arr.length; i++) {
                gongju_str = gongju_str + gongju_arr[i]
            }
            gongju_fang.innerHTML = gongju_str
            let all_gongju = gongju_fang.querySelectorAll("p")
            for (let i = 0; i < all_gongju.length; i++) {
                all_gongju[i].onclick = function (e) {
                    e.stopPropagation()
                    console.log(i)
                    gongju_arr.splice(i, 1)
                    let gongju_str = ''
                    for (let i = 0; i < gongju_arr.length; i++) {
                        gongju_str = gongju_str + gongju_arr[i]
                    }
                    gongju_fang.innerHTML = gongju_str
                }
            }
        }
    }


}

//添加步骤
function add_fangfa() {
    console.log(111111);
    let fangfa_fang = document.getElementsByClassName('fangfa_fang')[0]
    let one_fangfa = document.getElementsByClassName('fangfa_da')[0].innerHTML
    fangfa_arr.push(one_fangfa)
    let fangfa_str = ''
    for (let i = 0; i < fangfa_arr.length; i++) {
        fangfa_str = fangfa_str + fangfa_arr[i]
    }
    fangfa_fang.innerHTML = fangfa_str
    let fangfa_buzhou = document.getElementsByClassName('fangfa_buzhou')
    for (let i = 0; i < fangfa_buzhou.length; i++) {
        fangfa_buzhou[i].innerHTML = `步骤` + (i + 1)
    }
    let all_fangfa = fangfa_fang.querySelectorAll("p")
    for (let i = 0; i < all_fangfa.length; i++) {
        all_fangfa[i].onclick = function (e) {
            e.stopPropagation()
            console.log(i)
            fangfa_arr.splice(i, 1)
            let new_fangfa_str = ''
            for (let i = 0; i < fangfa_arr.length; i++) {
                new_fangfa_str = new_fangfa_str + fangfa_arr[i]
            }

            fangfa_fang.innerHTML = new_fangfa_str
            // let fangfa_buzhou = document.getElementsByClassName('fangfa_buzhou')
            // for (let i = 0; i < fangfa_buzhou.length; i++) {
            //     fangfa_buzhou[i].innerHTML = `步骤` + (i + 1)
            // }
            // let all_fangfa = fangfa_fang.querySelectorAll("p")
            // for (let i = 0; i < all_fangfa.length; i++) {
            //     all_fangfa[i].onclick = function (e) {
            //         e.stopPropagation()
            //         console.log(i)
            //         fangfa_arr.splice(i, 1)
            //         let fangfa_str = ''
            //         for (let i = 0; i < fangfa_arr.length; i++) {
            //             fangfa_str = fangfa_str + gongju_arr[i]
            //         }
            //         fangfa_fang.innerHTML = fangfa_str
            //         let fangfa_buzhou = document.getElementsByClassName('fangfa_buzhou')
            //         for (let i = 0; i < fangfa_buzhou.length; i++) {
            //             fangfa_buzhou[i].innerHTML = `步骤` + (i + 1)
            //         }
            //     }
            // }
        }
    }


}


//选择分类
let show_jiaofen = ref(false)
let actions_jiaofen: any = reactive([{ name: '选项一' }, { name: '选项二' }, { name: '选项三' }])
function onSelect_jiaofen(item: any) {
    // 默认情况下点击选项时不会自动收起
    // 可以通过 close-on-click-action 属性开启自动收起
    console.log(11111);

    show_jiaofen.value = false;
    Toast(item.name);
}

//确认发布点击事件
function fabu() {
    console.log('背景图片', file.value.files);
    console.log('标题是', main_title.value);
    console.log('课程简介', my_kejian.value);
    //材料
    let cailiao_value: any = document.getElementsByClassName('cailiao_onen')
    let cailiao_onenum: any = document.getElementsByClassName('cailiao_oney')
    for (let i = 0; i < cailiao_value.length; i++) {
        console.log('材料' + i, cailiao_value[i].value);
        console.log('材料' + i, cailiao_onenum[i].value);
    }
    //工具
    let gongju_value: any = document.getElementsByClassName('gongju_onen')
    let gongju_onenum: any = document.getElementsByClassName('gongju_oney')
    for (let i = 0; i < cailiao_value.length; i++) {
        console.log('工具' + i, gongju_value[i].value);
        console.log('工具' + i, gongju_onenum[i].value);
    }
    //方法
    console.log('方法图片', fangfa_file.value.files);
}

</script>

<style scoped>
.main {
    width: 100vw;
    height: 100vh;
}

.my_title {
    width: 100vw;
    height: 20vh;
    /* flex: 1; */
    /* border: 1px solid red; */
    /* padding: 3px; */
    background-color: rgb(254, 254, 254);
    /* border-bottom: 1px solid rgb(228, 228, 228); */
}

.my_fenlei {
    width: 100vw;
    height: 70vh;
    padding-top: 5px;
}

.upload_img {

    width: 100vw;
    height: 30vh;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0px;
    overflow: hidden;
    /* background-color: red; */
    background-color: rgb(246, 246, 246);
}

.fangfa_img {

    width: 93vw;
    height: 30vh;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0px;
    overflow: hidden;
    /* background-color: red; */
    background-color: rgb(246, 246, 246);
    margin-top: 10px;
}

.jian_jie {
    padding: 4%;
    border-bottom: 1px solid rgb(243, 243, 243);
}

.wen_jian {
    width: 90vw;
    font-size: 16px;
    line-height: 16px;
    margin-top: 10px;
    /* border: solid 1px #999; */
}

/* 材料 */
.cailiao {
    padding: 4%;
    border-bottom: 1px solid rgb(243, 243, 243);
}

.gongju {
    padding: 4%;
    border-bottom: 1px solid rgb(243, 243, 243);
}

.fangfa {
    padding: 4%;
    border-bottom: 1px solid rgb(243, 243, 243);
}

.fangfa_da {
    margin-top: 10px;
}

.cailiao_1 {
    height: 50%;
    margin-top: 10px;
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid rgb(243, 243, 243);
}

.gongju_1 {
    height: 50%;
    margin-top: 10px;
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid rgb(243, 243, 243);
}


:deep(.van-nav-bar__text) {
    color: black;
}

:deep(.van-nav-bar .van-icon) {
    color: black;
}
</style>